<template>
  <div class="box">
    <h1>我是父组件</h1>
    <hr />
    <Child>
      埋点土进去
      <!-- 具名插槽填充数据 -->
      <template v-slot:a>
        <div>我是填充具名插槽a位置结构</div>
      </template>

      <template v-slot:b>
        <div>我是填充具名插槽b位置结构</div>
      </template>
    </Child>
    <Child1 :todos="todos">
      <template v-slot="{ $row, $index }">
        <div>
          <span :style="{ color: $row.done ? 'green' : 'red' }"
            >{{ $row.title }} -- {{ $index }}</span
          >
        </div>
      </template>
    </Child1>
  </div>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
import Child1 from "./Child1.vue";

//响应式数据
import { ref } from "vue";

let todos = ref([
  { id: 1, title: "吃饭", done: false },
  { id: 2, title: "睡觉", done: true },
  { id: 3, title: "打豆豆", done: true },
]);
</script>

<style scoped>
.box {
  width: 40vw;
  height: 300px;
  background: skyblue;
}
.tmp {
  border: 1px solid red;
  margin: 5px;
}
</style>
